<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS_伪类选择器结构伪类2</title>
  <style>
      div>p:first-of-type{
          color: brown;
      }
      div>p:last-of-type{
          color: blue;
      }
      div>p:nth-of-type(2){
          color: blueviolet;
      }
  </style>
</head>
<body>

<!--所有of-type结尾的都是过滤出对应的元素按照代码编写顺序重上倒下进行排序选定元素，其中nth也符合an+b的规则-->
    <div>
        <span>孙七：100</span>   <!--排行1-->
        <p>张三：90</p>          <!--排行2-->
        <p>李四：80</p>          <!--排行3-->
        <p>王五：70</p>          <!--排行4-->
        <p>赵六：60</p>          <!--排行5-->
        <span>八师傅：11</span>   <!--排行1-->
    </div>
</body>
</html>